<template>
  <div class="search_wrap">
    <van-search shape="round"
                show-action>
      <template #left>
        <div>
          <van-icon name="arrow-left"
                    size="35"></van-icon>
        </div>
      </template>
      <template #action>
        <div>
          <van-button type="primary">搜索</van-button>
        </div>
      </template>
    </van-search>
    <div class="drop_wrap">
      <van-dropdown-menu>
        <van-dropdown-item v-model="price"
                           :options="priceOption"
                           @change="mysearch" />
        <van-dropdown-item v-model="sell"
                           @change="mysearch"
                           :options="sellOption" />
      </van-dropdown-menu>
      <van-button icon="plus"
                  type="primary"
                  @click="show=true">筛选

      </van-button>
    </div>
    <van-popup v-model="show"
               position="right"
               :style="{ width: '50%',height:'100%'}">
      <div>欢迎光临 红浪漫</div>
    </van-popup>
    <div class="search_list_one"
         v-if="uiFlag">
      <div class="list_single"
           v-for="(item,index) in searchlist"
           :key="index">
        <img :src="item.image">
        <div>
          <p class="pname">{{item.goods_name}}</p>
          <p class="price">￥{{item.price}}</p>
        </div>
      </div>
    </div>
    <div class="search_list_two"
         v-if="!uiFlag">
      <div class="list_double"
           v-for="(item,index) in searchlist"
           :key="index">
        <img :src="item.image"
             alt="">
        <p class="pname">{{item.goods_name}}</p>
        <p class="price">￥{{item.price}}</p>
      </div>
    </div>
    <van-icon class="myicon"
              :name="uiFlag?'bars':'ascending'"
              @click="changeUi"></van-icon>
  </div>
</template>
<script>
import { searchApi } from '../api/search'
import { getCategoryList } from '../api/category'
export default {
  created () {
    // 获取传来的搜索关键字
    this.keywords = this.$route.params.keywords;
    this.cid = this.$route.params.cid;//获取传来的分类id
    if (this.keywords) {
      // 调用搜索功能
      searchApi({ keywords: this.keywords, order: 0, p: 1 }).then(res => {
        console.log(res)
        this.searchlist = res.data;
      })
    }
    console.log(this.cid)
    if (this.cid) {//从分类页跳转
      getCategoryList({
        category_id: this.cid, order: 1, p: 1
      }).then(res => {
        this.searchlist = res.data;
      })
    }
  },
  methods: {
    changeUi () {
      this.uiFlag = !this.uiFlag;

    },
    async mysearch (val) {//val 代表筛选条件
      if (this.cid) {
        var myres = await getCategoryList({ category_id: this.cid, order: val, p: 1 })
        this.searchlist = myres.data;
      } else {
        var res = await searchApi({ p: 1, keywords: this.keywords, order: val })
        this.searchlist = res.data;
      }

    }
  },
  data () {
    return {
      searchlist: [],//搜索的商品列表
      show: false,
      price: 0,
      cid: "",//分类id
      uiFlag: true,
      sell: 0,
      keywords: "",
      priceOption: [
        { text: '价格', value: 0 },
        { text: '价格由低到高', value: "4" },
        { text: '价格由高到低', value: "3" },
      ],
      sellOption: [
        { text: '销量', value: 0 },
        { text: '销量由低到高', value: "2" },
        { text: '销量由高到低', value: "1" },
      ],
    }
  }
}
</script>
<style lang="less">
.search_wrap {
  position: relative;
  .myicon {
    position: fixed;
    right: 25px;
    bottom: 20%;
    font-size: 70px;
    border: 1px solid black;
    border-radius: 50%;
    background: white;
  }
}
.drop_wrap {
  display: flex;
  .van-dropdown-menu {
    flex: 1;
  }
}
.search_list_one {
  width: 100%;
  .list_single {
    height: 280px;
    display: flex;
    background: white;
    margin-top: 10px;
    img {
      width: 260px;
      height: 260px;
    }
    > div {
      margin-left: 10px;
      font-size: 25px;
    }
  }
}
.search_list_two {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .list_double {
    width: 45%;
    background: white;
    margin-top: 10px;
    height: 560px;
    img {
      width: 100%;
      height: 340px;
    }
  }
}

.pname {
  height: 80px;
  line-height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-box-orient: vertical;
  -o-box-orient: vertical;
}
.price {
  color: red;
  margin-top: 15px;
}
.shop {
  color: #ccc;
  margin-top: 15px;
}
</style>